<template>
  <div class="tableFn">
    111111
    <DynamicTable ref="dataTableRef" :style="{height:800+'px'}" :tableHeight="tableHeight" :tableData="tableData" :tableHeader="tableHeader">
    </DynamicTable>
    111111111
  </div>
</template>

<script setup lang="ts">


import DynamicTable from "./components/DynamicTable.vue";

import { ref, reactive, toRefs, onBeforeMount, onBeforeUnmount, onMounted } from 'vue'

//表格的高度
const tableHeight = ref(0)

// 静态表格表头及数据
const tableHeader = reactive([
  {
    label: "基本信息",
    children: [
      {
        label: "姓名",
        children: [
          {
            label: "姓名1",
            prop: "name",
            align: "center",
          },
          {
            label: "姓名2",
            prop: "namet",
            align: "center",
          },
        ],
      },
      {
        label: "生日",
        sort: true,
        prop: "birth",
        align: "center",
      },
    ],
  },
  { label: "地址", sort: false, prop: "address", align: "left" },
  {
    label: "年龄",
    sort: true,
    prop: "age",
  },
  {
    label: "电话",
    sort: false,
    prop: "phone",
  },
])

const tableData = reactive<object[]>([
  {
    name: "张三",
    namet: "张三2",
    address: "广西南宁市贤宾路1号",
    birth: "2021-01-01",
    age: 20,
    phone: "13877100000",
  },
  {
    name: "李四",
    namet: "李四2",
    birth: "2022-01-01",
    address: "广西南宁市悦宾路1号",
    age: 19,
    phone: "13077700000",
  },

])

</script>

<style scoped lang='scss'>
.tableFn {
  width: 100%;
  height: 100%;
  padding: 20px;

}
</style>
